<!DOCTYPE HTML>
<html>
<head>
	<title>VeeTouch</title>
	<meta charset="utf-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1">
    
	<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
    
	<link rel="stylesheet" href="./css/jquery.mobile-1.0.css" />
    <link rel="stylesheet" href="./css/veetouch.css" />
    <link rel="stylesheet" href="./css/photoswipe.css" />
    
	<script src="./js/jquery-1.7.1.min.js"></script>
	<script src="./js/jquery.mobile-1.0.min.js"></script>
    
    <script type="text/javascript">
        
		// Detect User Select Image for share 
        // http://jquerymobile.com/demos/1.0/docs/buttons/buttons-events.html
        // http://api.jquery.com/click/
        $(document).ready(function () {	
            /*
                                $("#image1").click(function() {
                                    $("#image1").css("border","1px solid blue");
                                });
                                */
                                
            $("#submitBtn").bind( "click", function(event, ui) 
            {
                alert("Submit");
            });
            
            // Select all image
            $("img").click(function() {
                $(event.target).css("border","1px solid blue");
                //event.target.css("border","1px solid blue");
                //alert('Handler for .click() called.');
            });
            
            $("#clearAllBtn").click(function() {
                $("img").css("border","");
            });
        });
	</script>
</head>
<body>
    <div data-role="page" id="Home">
    	<div data-role="header">
            <!-- Home button -->
			<a href="index.html" data-role="button" data-theme="d" data-icon="home" rel="external" data-iconpos="notext">Home</a>
    		<h1>VeeTouch Gallery</h1>
            <!-- Close 
			 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Connect to Server</a>
                                -->
    	</div>
        <div data-role="content" >
    		<ul data-role="listview" data-inset="true">
    			<li><a href="#Gallery1">Gallery 1</a></li>
    			<li><a href="#">Gallery 2</a></li>
    		</ul> 
    	</div>
    </div>
    
	<div data-role="page" id="Gallery1" class="gallery-page" data-theme="d" data-add-back-btn="true">
		<div data-role="header" data-position="inline">
			<h1>Gallery1</h1>
  		</div>
        <div data-role="content">
            <ul class="gallery">
                <li><a href="#" rel="external"><img src="./images/thumb/001.jpg" alt="Image 001" id="image1" /></a></li>
                <li><a href="#" rel="external"><img src="./images/thumb/002.jpg" alt="Image 002" id="image2"/></a></li>
                <li><a href="#" rel="external"><img src="./images/thumb/003.jpg" alt="Image 003" id="image3"/></a></li>
                <li><a href="#" rel="external"><img src="./images/thumb/004.jpg" alt="Image 004" id="image4"/></a></li>
                <li><a href="#" rel="external"><img src="./images/thumb/005.jpg" alt="Image 005" id="image5"/></a></li>
                <li><a href="#" rel="external"><img src="./images/thumb/006.jpg" alt="Image 006" id="image6"/></a></li>
                <li><a href="#" rel="external"><img src="./images/thumb/007.jpg" alt="Image 007" id="image7"/></a></li>
                <li><a href="#" rel="external"><img src="./images/thumb/008.jpg" alt="Image 008" id="image8"/></a></li>
                <li><a href="#" rel="external"><img src="./images/thumb/009.jpg" alt="Image 009" id="image9"/></a></li>
            </ul>
        </div>
		<div data-role="footer" data-theme="a" style="pagging:15px;">
            <a id="clearAllBtn" href="#" data-role="button" data-theme="a" style="float:left;margin-left:15px;margin-top:5px;margin-bottom:5px;">Clear All</a>
            <a id="submitBtn"   href="#" data-role="button" data-theme="b" style="float:right;margin-right:15px;margin-top:5px;margin-bottom:5px;">Start Share</a>
        </div>
	</div>
    
</body>
</html>